<template>
  <BasicModal
    @register="register"
    title="分配记录"
    width="1200px"
    :canFullscreen="false"
    :showOkBtn="false"
    :showCancelBtn="false"
    :loading="loading"
  >
    <BasicTable @register="registerTable">
      <template #orderState="{ record }">
        {{ getOrderStateText(record.orderState) }}
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref } from 'vue';
  import { AllocationRecord } from '@/api/phoneAuth/allocationRecord';
  import { BasicColumn } from '@/components/Table/src/types/table';
  import Dictionary from '@/utils/dictionary';

  const loading = ref(false);
  const tenantId = ref();
  const dicts = Dictionary.getLocalMulti(['terimalStatus', 'dispenseStatus', 'phoneOrderState']);

  const [register] = useModalInner(async (data) => {
    tenantId.value = data.row.tenantId;
    reload();
  });

  const getBasicColumns: BasicColumn[] = [
    {
      title: '额度来源订单',
      dataIndex: 'orderId',
      width: 120,
    },
    {
      title: '分配额度',
      dataIndex: 'allotment',
      width: 80,
    },
    {
      title: '分配状态',
      dataIndex: 'orderState',
      width: 80,
      slots: { customRender: 'orderState' },
    },
    {
      title: '分配后总额',
      dataIndex: 'allotmentTotal',
      width: 80,
    },
    {
      title: '分配人',
      dataIndex: 'assignerName',
      width: 80,
    },
    {
      title: '分配时间',
      dataIndex: 'createTime',
      width: 120,
    },
    {
      title: '资源到期时间',
      dataIndex: 'endTime',
      width: 120,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 100,
    },
  ];

  const [registerTable, { reload }] = useTable({
    title: '',
    api: AllocationRecord,
    columns: getBasicColumns,
    rowKey: 'id',
    useSearchForm: false,
    showTableSetting: false,
    tableSetting: { fullScreen: false },
    showIndexColumn: false,
    clickToRowSelect: false,
    beforeFetch: (parmas) => {
      return {
        ...parmas,
        tenantId: tenantId.value,
      };
    },
  });

  function getOrderStateText(val) {
    let item = dicts.phoneOrderState.find((f) => f.dictValue === val);
    return item?.dictLabel;
  }
</script>

<style lang="less" scoped>
  .imgBox {
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  h1 {
    font-size: 18px;
    text-align: center;
  }
</style>
